<template>
  <div class="order_list">
    <!-- 单件 -->
    <div class="order_list_item">
      <div class="order_list_header">
        <span class="order_list_header_title">(第{{orderData.periodId}}期){{orderData.groupBuyName}}</span>
        <span class="order_list_header_status">{{orderData.createDate | datetimeFormatter}}</span>
      </div>
      <div @click="detailsClick(orderData)" class="order_list_content"   v-if="orderData.itemList.length ==1" v-for="item in orderData.itemList">
        <div class="order_list_content_img mg-r20">
          <!--          <img style="width:170px;height:170px" :src="item.thumbnail"></img>-->
          <img style="width:42.5px;height:42.5px" :src="item.thumbnail"></img>

        </div>
        <div class="order_list_content_box">
          <div class="order_list_content_top">
            <span class="order_list_content_name">{{item.name}}</span>
            <div class="order_list_content_price">
              <span class="order_list_content_priceIcon">¥</span>
              <span class="order_list_content_priceTitle">{{item.price | price}}</span>
            </div>
          </div>
          <div class="order_list_content_bottom">
            <span class="order_list_content_subtitle">R:{{orderData.orderRow}},C:{{orderData.orderCol}}</span>
            <div class="order_list_content_price">
              <span class="order_list_content_numberIcon">x</span>
              <span class="order_list_content_number">{{item.quantity | number}}</span>
            </div>
          </div>
          <!--          @click="relationshipClick"-->
<!--          <div class="aaaaaaaaa"    >-->

<!--            <div class="order_list_bottom_itemBox"  v-if="relationshipType == false">-->
<!--              <div class="order_list_bottom_item">-->
<!--                <img class="order_list_bottom_item_img" :src="avatar?avatar:logo"></img>-->
<!--              </div>-->
<!--              <div class="order_list_bottom_itemTwo">-->
<!--                <img class="order_list_bottom_item_img" v-if="orderData.linkedList[0] != null" :src="orderData.linkedList[0].avatar?orderData.linkedList[0].avatar:logo"></img>-->
<!--              </div>-->
<!--              <div class="order_list_bottom_itemThree">-->
<!--                <img class="order_list_bottom_item_img" v-if="orderData.linkedList[1] != null" :src="orderData.linkedList[1].avatar?orderData.linkedList[1].avatar:logo"></img>-->
<!--              </div>-->
<!--              <div class="order_list_bottom_itemFour">-->
<!--                <img class="order_list_bottom_item_img" v-if="orderData.linkedList[2] != null" :src="orderData.linkedList[2].avatar?orderData.linkedList[2].avatar:logo"></img>-->
<!--              </div>-->
<!--              <div class="order_list_bottom_itemFive">-->
<!--                <img class="order_list_bottom_item_img" v-if="orderData.linkedList[3] != null" :src="orderData.linkedList[3].avatar?orderData.linkedList[3].avatar:logo"></img>-->
<!--              </div>-->
<!--              <div class="order_list_bottom_itemSix">-->
<!--                <img class="order_list_bottom_item_img" v-if="orderData.linkedList[4] != null" :src="orderData.linkedList[4].avatar?orderData.linkedList[4].avatar:logo"></img>-->
<!--              </div>-->
<!--              <div class="order_list_bottom_itemSeven">-->
<!--                <img class="order_list_bottom_item_img" v-if="orderData.linkedList[5] != null" :src="orderData.linkedList[5].avatar?orderData.linkedList[5].avatar:logo"></img>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div >-->

<!--              <i class="el-icon-arrow-down order_list_bottom_icon" v-if="relationshipType == false" @click="relationshipClick"></i>-->
<!--              <i class="el-icon-arrow-up order_list_bottom_icon" v-if="relationshipType == true" @click="relationshipClick"></i>-->
<!--              &lt;!&ndash;              <span class="order_list_bottom_icon" v-if="relationshipType == false" @click="relationshipClick" >&#xe657;</span>&ndash;&gt;-->
<!--              &lt;!&ndash;              <span class="order_list_bottom_icon" v-if="relationshipType == true" @click="relationshipClick" >&#xe656;</span>&ndash;&gt;-->
<!--            </div>-->
<!--          </div>-->
        </div>
      </div>
<!--      v-if="relationshipType ==true"-->
      <div class="order_list_relationship_content" >
        <div class="order_list_relationship">
          <div class="order_list_relationship_itemBox">
            <div class="order_list_relationship_item">
              <img class="order_list_relationship_itemImg" :src="orderData.avatar?orderData.avatar:logo"></img>
            </div>
            <span  :class="[ orderData.orderStatus == 0 ? 'redcss'  : '']" class="order_list_relationship_itemTitle">{{ orderData.nickname }}</span>
          </div>
        </div>
        <div class="order_list_relationship">
          <div class="order_list_relationship_itemBox">
            <div class="order_list_relationship_item" v-if="orderData.linkedList[0] != null">
              <img class="order_list_relationship_itemImg" :src="orderData.linkedList[0].avatar?orderData.linkedList[0].avatar:logo"></img>
            </div>
<!--            orderData.linkedList.orderStatus-->
<!--            class="order_list_relationship_itemTitle"-->
<!--            :class="[ true ? popperClass : '']"-->

            <span  :class="[ orderData.linkedList[0].orderStatus == 0 ? 'redcss'  : '']"   class="order_list_relationship_itemTitle"   v-if="orderData.linkedList[0] != null">{{ orderData.linkedList[0].nickname }}</span>
          </div>
          <div class="order_list_relationship_itemBox">
            <div class="order_list_relationship_item" v-if="orderData.linkedList[1] != null">
              <img class="order_list_relationship_itemImg" :src="orderData.linkedList[1].avatar?orderData.linkedList[1].avatar:logo"></img>
            </div>
            <span :class="[ orderData.linkedList[1].orderStatus == 0 ? 'redcss'  : '']" class="order_list_relationship_itemTitle" v-if="orderData.linkedList[1] != null">{{ orderData.linkedList[1].nickname }}</span>
          </div>
        </div>
        <div class="order_list_relationship">
          <div class="order_list_relationship_itemBox">
            <div class="order_list_relationship_item" v-if="orderData.linkedList[2] != null">
              <img class="order_list_relationship_itemImg" :src="orderData.linkedList[2].avatar?orderData.linkedList[2].avatar:logo"></img>
            </div>
            <span :class="[ orderData.linkedList[2].orderStatus == 0 ? 'redcss'  : '']" class="order_list_relationship_itemTitle" v-if="orderData.linkedList[2] != null">{{ orderData.linkedList[2].nickname }}</span>
          </div>
          <div class="order_list_relationship_itemBox">
            <div  class="order_list_relationship_item" v-if="orderData.linkedList[3] != null">
              <img class="order_list_relationship_itemImg" :src="orderData.linkedList[3].avatar?orderData.linkedList[3].avatar:logo"></img>
            </div>
            <span :class="[ orderData.linkedList[3].orderStatus == 0 ? 'redcss'  : '']" class="order_list_relationship_itemTitle" v-if="orderData.linkedList[3] != null">{{ orderData.linkedList[3].nickname }}</span>
          </div>
          <div class="order_list_relationship_itemBox">
            <div class="order_list_relationship_item" v-if="orderData.linkedList[4] != null">
              <img class="order_list_relationship_itemImg" :src="orderData.linkedList[4].avatar?orderData.linkedList[4].avatar:logo"></img>
            </div>
            <span :class="[ orderData.linkedList[4].orderStatus == 0 ? 'redcss'  : '']" class="order_list_relationship_itemTitle"  v-if="orderData.linkedList[4] != null">{{ orderData.linkedList[4].nickname }}</span>
          </div>
          <div class="order_list_relationship_itemBox">
            <div class="order_list_relationship_item" v-if="orderData.linkedList[5] != null">
              <img class="order_list_relationship_itemImg" :src="orderData.linkedList[5].avatar?orderData.linkedList[5].avatar:logo"></img>
            </div>
            <span :class="[ orderData.linkedList[5].orderStatus == 0 ? 'redcss'  : '']" class="order_list_relationship_itemTitle" v-if="orderData.linkedList[5] != null">{{ orderData.linkedList[5].nickname }}</span>
          </div>
        </div>
      </div>
      <!--      <div class="order_list_bottom">-->
      <!--        <div class="oder_appjs">-->
      <!--          <span class="order_button" v-if="orderData.orderStatus==4" @click="ticlick">提现</span>-->
      <!--          <span class="order_button" style="margin-left:15px" v-if="orderData.orderStatus==4" @click="upgradeclick">升级</span>-->
      <!--        </div>-->
      <!--      </div>-->
    </div>
  </div>
</template>

<script>
import {upgrade}from'@/api/groupOrder'
// const storage = weex.requireModule('storage')
// const modal = weex.requireModule('modal')
// const pay = app.requireModule("eeui/pay");
export default {
  data() {
    return {
      relationshipType:true,
      logo:'http://cdn.rzico.com/qm365/ic_launcher.png'
    }
  },
  props:[
    'orderData'
  ],
  watch: {
    orderData(newName, oldName) {
      this.orderData=newName
      if(this.orderData.orderStatus==1){
        this.relationshipType=true
      } else {
        this.relationshipType=false
      }
    }
  },
  mounted() {
    if(this.orderData.orderStatus==1){
      this.relationshipType=true
    } else {
      this.relationshipType=false
    }
  },
  filters:{
    price(value) {
      var toFixedNum = Number(value).toFixed(3);
      var realVal = toFixedNum.substring(0, toFixedNum.toString().length - 1);
      return realVal;
    },
    number(value){
      var toFixedNum = Number(value).toFixed(0);
      return toFixedNum;
    }
  },
  components:{
  },
  created(){
    // this.initIconFont()

  },
  methods:{

    detailsClick(orderData) {
      console.log(orderData)
      this.$emit('detailsClick',orderData.id)
    },


    // ticlick(){
    //   eeui.openPage({
    //       url: 'root://pages/member/distribution/transfer',
    //       statusBarType: 'immersion',
    //       statusBarStyle: false
    //     }, (result) => {}
    //   );
    // },
    // upgradeclick(){
    //   console.log(this.getGlobalData().token);
    //   upgrade({groupOrderId:this.orderData.id}).then(res=>{
    //     eeui.toast('升级成功')
    //     this.$emit('loadList')
    //   }).catch(res=>{
    //     eeui.toast('升级失败，请稍等')
    //   })
    //
    // },
    relationshipClick(){
      this.relationshipType = !this.relationshipType
    }
  }
}
</script>
<style scoped>
.popperClass{
  font-size: 8px;
  color: #333333;
  margin-top: 10px;
  margin-bottom: 10px;
  lines:1;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;

  color: red;
}

@keyframes move {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

.order_list {
  margin-top: 20px;
  padding-left: 9px;
  padding-right: 9px;
  width: 25%;
  /*width: 188px;*/
  box-sizing: border-box;
}

.order_list_item {
  /*width: 175px;*/
  height: 250px;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 6px;
  margin-top: 5px;
  padding: 15px;
  box-sizing: border-box;
}

.order_list_header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  /*width: 162px;*/
  height: 10px;
}

.order_list_header_title {
  font-size: 6px;
  font-weight: 500;
  color: rgba(26, 26, 30, 1);
  line-height: 18px;
  width: 100px;
  lines:1;
  span-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.order_list_header_status {
  font-size: 6px;
  font-weight: 400;
  color:#ea706a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order_list_content {
  /*width: 162px;*/
  display: flex;
  flex-direction: row;
  margin-top: 15px;
  position: relative;
}

.order_list_content_img {
  width: 42px;
  height: 42px;
  background: rgba(250, 250, 250, 1);
  border-radius: 4px;
  overflow: hidden;
}

.order_list_content_box {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.order_list_content_top {
  /*width: 115px;*/
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.order_list_content_name {
  font-size: 7px;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
  display: block;
  width: 80px;
  /*text-overflow: ellipsis;*/
  /*overflow: hidden;*/
  /*white-space: nowrap;*/
  display: -webkit-box;
  -webkit-box-orient: vertical; /* 表示盒子对象的子元素的排列方式 */
  -webkit-line-clamp: 2; /* 限制文本的行数，表示文本第多少行省略 */
  text-overflow: ellipsis;/*  打点展示 */
  overflow: hidden;/*超出部分进行隐藏*/
}

.order_list_content_price {
  display: flex;
  flex-direction: row;
}

.order_list_content_priceIcon{
  font-size: 9px;
  font-weight: 400;
  color: #ea706a;
  line-height: 7px;
}

.order_list_content_priceTitle{
  font-size: 6px;
  font-weight: 400;
  color: #ea706a;
  line-height: 8px;
  /* margin-left: 2px; */
}
.aaaaaaaaa{
  margin-top: 5px;
  /* background-color: blueviolet; */
  display: flex;
  flex-direction: row;
  align-items: center;
}
.order_list_content_bottom {
  /*width: 115px;*/
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.order_list_content_subtitle {
  font-size: 6px;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
  /*line-height: 9px;*/
  opacity: 0.5;
  width: 100px;
  text-overflow: ellipsis;
  lines:2;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
}

.order_list_content_numberIcon{
  font-size: 5px;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
  line-height: 7px;
  opacity: 0.5;
}

.order_list_content_number {
  font-size: 6px;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
  line-height: 6px;
  opacity: 0.5;
  margin-left: 1px;
}

.order_list_content_information {
  width: 162px;
  height: 10px;
  background: rgba(0, 0, 0, 0);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  margin-top: 10px;
}

.order_list_content_left {
  font-size: 6px;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
  line-height: 18px;
  opacity: 0.5;
}

.order_price_title {
  font-size: 12px;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
  line-height: 9px;
}

.order_price_icon {
  font-size: 10px;
  font-weight: 400;
  color: #eb594f;
  line-height: 9px;
}

.order_price_number {
  font-size: 12px;
  font-weight: 400;
  color: #eb594f;
  line-height: 9px;
}
.order_price_box{
  display: flex;
  flex-direction: row;
  align-items: center;
}

.order_list_botton {
  width: 162px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  margin-top: 10px;
}

.order_list_botton_gray {
  width: 34px;
  height: 14px;
  border-style: solid;
  border-width: 1px;
  border-color: rgba(126, 128, 136, 0.8);
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 6px;
}

.order_list_botton_gray_title {
  font-size: 6px;
  font-weight: 400;
  line-height: 12px;
  color: rgba(26, 26, 30, 0.5);
}


.order_list_botton_red {
  width: 34px;
  height: 12px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.8;
}

.order_list_botton_red_title {
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
  /* color: white; */
}

.order_list_content_more {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  position: absolute;
  right: 0;
  height: 42px;
}

.order_item_icon {
  font-size: 18px;
  opacity: 0.3;
  width: 13px;
  height: 13px;
}

.order_item_more_number {
  font-size: 12px;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
  opacity: 0.5;
}

.mg-l20 {
  margin-left: 10px;
}

.mg-r20 {
  margin-right: 5px
}

.order_list_bottom{
  flex: 1;
  position: relative;
  display:flex;
  flex-direction: row;
  align-items: center;
  margin-top: 20px;
  /* background-color: blueviolet; */
}

.order_list_bottom_item{
  /*width: 52px;*/
  /*height: 52px;*/
  width: 13px;
  height: 13px;
  background-color: #b4b4b4;
  border-radius: 100%;
}

.order_list_bottom_item_img{
  /*width: 52px;*/
  /*height: 52px;*/
  width: 13px;
  height: 13px;
  background-color: #ea706a;
  border-radius: 50%;
}

.order_list_bottom_itemTwo{
  /*width: 52px;*/
  /*height: 52px;*/
  width: 13px;
  height: 13px;
  background-color: #b4b4b4;
  border-radius: 100%;
  position: absolute;
  left: 10px;
}

.order_list_bottom_itemThree{
  width: 13px;
  height: 13px;
  background-color: #b4b4b4;
  border-radius: 100%;
  position: absolute;
  left: 20px;
}

.order_list_bottom_itemFour{
  width: 13px;
  height: 13px;
  background-color: #b4b4b4;
  border-radius: 100%;
  position: absolute;
  left: 30px;
}

.order_list_bottom_itemFive{
  width: 13px;
  height: 13px;
  background-color: #b4b4b4;
  border-radius: 100%;
  position: absolute;
  left: 40px;
}

.order_list_bottom_itemSix{
  width: 13px;
  height: 13px;
  background-color: #b4b4b4;
  border-radius: 100%;
  position: absolute;
  left: 50px;
}

.order_list_bottom_itemSeven{
  width: 13px;
  height: 13px;
  background-color: #b4b4b4;
  border-radius: 100%;
  position: absolute;
  left: 60px;
}

.order_list_bottom_itemBox{
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  flex: 1;
}

.order_list_bottom_icon{
  font-family: iconfont2;
  font-size: 12px;
  color: #b5b5b5;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  text-align: right;
}

.order_list_relationship_content{
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}

.order_list_relationship{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex: 1;
  /*margin-bottom: 40px;*/
}

.order_list_relationship_itemBox{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
}

.order_list_relationship_item{
  /*width: 60px;*/
  /*height: 60px;*/
  width: 15px;
  height: 15px;
  background-color: #b4b4b4;
  border-radius: 50%;
}

.order_list_relationship_itemTitle{
  /*font-size: 8px;*/
  font-size: 12px;
  /*color: #333333;*/
  color: red;
  margin-top: 10px;
  margin-bottom: 10px;
  lines:1;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.order_list_relationship_itemImg{
  /*width: 60px;*/
  /*height: 60px;*/
  width: 15px;
  height: 15px;
  background-color: #ea706a;
  border-radius: 50%;
}
.order_button{
  font-size: 14px;
  width: 75px;
  height: 25px;
  display: flex;
  color: #fff;
  text-align: center;
  padding-top: 5px;
  border-radius: 8px;
  background-color: #ea706a;
}
.oder_appjs{
  width: 325px;
  /* background-color: blueviolet; */
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.redcss{
  /*background-color: yellow;*/
  color: black!important;
  /*font-size: 8px;*/
  font-size:12px;
  color: #333333;
  margin-top: 10px;
  margin-bottom: 10px;
  lines:1;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

input::-webkit-input-placeholder { /* WebKit browsers */
  color: red;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: red;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: red;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: red;
}
</style>











<!--<template>-->
<!--  <div class="order_list">-->
<!--    &lt;!&ndash; 单件 &ndash;&gt;-->
<!--    <div class="order_list_item">-->
<!--      <div class="order_list_header">-->
<!--        <span class="order_list_header_title">{{orderData.groupBuyName}}(第{{orderData.periodId}}期)</span>-->
<!--        <span class="order_list_header_status">{{orderData.createDate | datetimeFormatter}}</span>-->
<!--      </div>-->
<!--      <div @click="detailsClick(orderData)" class="order_list_content" v-if="orderData.itemList.length ==1" v-for="item in orderData.itemList">-->
<!--        <div class="order_list_content_img mg-r20">-->
<!--          &lt;!&ndash;          <img style="width:170px;height:170px" :src="item.thumbnail"></img>&ndash;&gt;-->
<!--          <img style="width:42.5px;height:42.5px" :src="item.thumbnail"></img>-->

<!--        </div>-->
<!--        <div class="order_list_content_box">-->
<!--          <div class="order_list_content_top">-->
<!--            <span class="order_list_content_name">{{item.name}}</span>-->
<!--            <div class="order_list_content_price">-->
<!--              <span class="order_list_content_priceIcon">¥</span>-->
<!--              <span class="order_list_content_priceTitle">{{item.price | price}}</span>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="order_list_content_bottom">-->
<!--            <span class="order_list_content_subtitle">{{item.spec}}</span>-->
<!--            <div class="order_list_content_price">-->
<!--              <span class="order_list_content_numberIcon">x</span>-->
<!--              <span class="order_list_content_number">{{item.quantity | number}}</span>-->
<!--            </div>-->
<!--          </div>-->
<!--&lt;!&ndash;          @click="relationshipClick"&ndash;&gt;-->
<!--          <div class="aaaaaaaaa"    >-->
<!--            <div class="order_list_bottom_itemBox" v-if="relationshipType == false">-->
<!--              <div class="order_list_bottom_item">-->
<!--                <img class="order_list_bottom_item_img" :src="avatar?avatar:logo"></img>-->
<!--              </div>-->
<!--              <div class="order_list_bottom_itemTwo">-->
<!--                <img class="order_list_bottom_item_img" v-if="orderData.linkedList[0] != null" :src="orderData.linkedList[0].avatar?orderData.linkedList[0].avatar:logo"></img>-->
<!--              </div>-->
<!--              <div class="order_list_bottom_itemThree">-->
<!--                <img class="order_list_bottom_item_img" v-if="orderData.linkedList[1] != null" :src="orderData.linkedList[1].avatar?orderData.linkedList[1].avatar:logo"></img>-->
<!--              </div>-->
<!--              <div class="order_list_bottom_itemFour">-->
<!--                <img class="order_list_bottom_item_img" v-if="orderData.linkedList[2] != null" :src="orderData.linkedList[2].avatar?orderData.linkedList[2].avatar:logo"></img>-->
<!--              </div>-->
<!--              <div class="order_list_bottom_itemFive">-->
<!--                <img class="order_list_bottom_item_img" v-if="orderData.linkedList[3] != null" :src="orderData.linkedList[3].avatar?orderData.linkedList[3].avatar:logo"></img>-->
<!--              </div>-->
<!--              <div class="order_list_bottom_itemSix">-->
<!--                <img class="order_list_bottom_item_img" v-if="orderData.linkedList[4] != null" :src="orderData.linkedList[4].avatar?orderData.linkedList[4].avatar:logo"></img>-->
<!--              </div>-->
<!--              <div class="order_list_bottom_itemSeven">-->
<!--                <img class="order_list_bottom_item_img" v-if="orderData.linkedList[5] != null" :src="orderData.linkedList[5].avatar?orderData.linkedList[5].avatar:logo"></img>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div >-->

<!--              <i class="el-icon-arrow-down order_list_bottom_icon" v-if="relationshipType == false" @click="relationshipClick"></i>-->
<!--              <i class="el-icon-arrow-up order_list_bottom_icon" v-if="relationshipType == true" @click="relationshipClick"></i>-->
<!--              &lt;!&ndash;              <span class="order_list_bottom_icon" v-if="relationshipType == false" @click="relationshipClick" >&#xe657;</span>&ndash;&gt;-->
<!--              &lt;!&ndash;              <span class="order_list_bottom_icon" v-if="relationshipType == true" @click="relationshipClick" >&#xe656;</span>&ndash;&gt;-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="order_list_relationship_content" v-if="relationshipType ==true">-->
<!--        <div class="order_list_relationship">-->
<!--          <div class="order_list_relationship_itemBox">-->
<!--            <div class="order_list_relationship_item">-->
<!--              <img class="order_list_relationship_itemImg" :src="orderData.avatar?orderData.avatar:logo"></img>-->
<!--            </div>-->
<!--            <span class="order_list_relationship_itemTitle">{{ orderData.nickname }}</span>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="order_list_relationship">-->
<!--          <div class="order_list_relationship_itemBox">-->
<!--            <div class="order_list_relationship_item" v-if="orderData.linkedList[0] != null">-->
<!--              <img class="order_list_relationship_itemImg" :src="orderData.linkedList[0].avatar?orderData.linkedList[0].avatar:logo"></img>-->
<!--            </div>-->
<!--            <span class="order_list_relationship_itemTitle" v-if="orderData.linkedList[0] != null">{{ orderData.linkedList[0].nickname }}</span>-->
<!--          </div>-->
<!--          <div class="order_list_relationship_itemBox">-->
<!--            <div class="order_list_relationship_item" v-if="orderData.linkedList[1] != null">-->
<!--              <img class="order_list_relationship_itemImg" :src="orderData.linkedList[1].avatar?orderData.linkedList[1].avatar:logo"></img>-->
<!--            </div>-->
<!--            <span class="order_list_relationship_itemTitle" v-if="orderData.linkedList[1] != null">{{ orderData.linkedList[1].nickname }}</span>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="order_list_relationship">-->
<!--          <div class="order_list_relationship_itemBox">-->
<!--            <div class="order_list_relationship_item" v-if="orderData.linkedList[2] != null">-->
<!--              <img class="order_list_relationship_itemImg" :src="orderData.linkedList[2].avatar?orderData.linkedList[2].avatar:logo"></img>-->
<!--            </div>-->
<!--            <span class="order_list_relationship_itemTitle" v-if="orderData.linkedList[2] != null">{{ orderData.linkedList[2].nickname }}</span>-->
<!--          </div>-->
<!--          <div class="order_list_relationship_itemBox">-->
<!--            <div class="order_list_relationship_item" v-if="orderData.linkedList[3] != null">-->
<!--              <img class="order_list_relationship_itemImg" :src="orderData.linkedList[3].avatar?orderData.linkedList[3].avatar:logo"></img>-->
<!--            </div>-->
<!--            <span class="order_list_relationship_itemTitle" v-if="orderData.linkedList[3] != null">{{ orderData.linkedList[3].nickname }}</span>-->
<!--          </div>-->
<!--          <div class="order_list_relationship_itemBox">-->
<!--            <div class="order_list_relationship_item" v-if="orderData.linkedList[4] != null">-->
<!--              <img class="order_list_relationship_itemImg" :src="orderData.linkedList[4].avatar?orderData.linkedList[4].avatar:logo"></img>-->
<!--            </div>-->
<!--            <span class="order_list_relationship_itemTitle" v-if="orderData.linkedList[4] != null">{{ orderData.linkedList[4].nickname }}</span>-->
<!--          </div>-->
<!--          <div class="order_list_relationship_itemBox">-->
<!--            <div class="order_list_relationship_item" v-if="orderData.linkedList[5] != null">-->
<!--              <img class="order_list_relationship_itemImg" :src="orderData.linkedList[5].avatar?orderData.linkedList[5].avatar:logo"></img>-->
<!--            </div>-->
<!--            <span class="order_list_relationship_itemTitle" v-if="orderData.linkedList[5] != null">{{ orderData.linkedList[5].nickname }}</span>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      &lt;!&ndash;      <div class="order_list_bottom">&ndash;&gt;-->
<!--      &lt;!&ndash;        <div class="oder_appjs">&ndash;&gt;-->
<!--      &lt;!&ndash;          <span class="order_button" v-if="orderData.orderStatus==4" @click="ticlick">提现</span>&ndash;&gt;-->
<!--      &lt;!&ndash;          <span class="order_button" style="margin-left:15px" v-if="orderData.orderStatus==4" @click="upgradeclick">升级</span>&ndash;&gt;-->
<!--      &lt;!&ndash;        </div>&ndash;&gt;-->
<!--      &lt;!&ndash;      </div>&ndash;&gt;-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import {upgrade}from'@/api/groupOrder'-->
<!--// const storage = weex.requireModule('storage')-->
<!--// const modal = weex.requireModule('modal')-->
<!--// const pay = app.requireModule("eeui/pay");-->
<!--export default {-->
<!--  data() {-->
<!--    return {-->
<!--      relationshipType:true,-->
<!--      logo:'http://cdn.rzico.com/qm365/ic_launcher.png'-->
<!--    }-->
<!--  },-->
<!--  props:[-->
<!--    'orderData'-->
<!--  ],-->
<!--  watch: {-->
<!--    orderData(newName, oldName) {-->
<!--      this.orderData=newName-->
<!--      if(this.orderData.orderStatus==1){-->
<!--        this.relationshipType=true-->
<!--      } else {-->
<!--        this.relationshipType=false-->
<!--      }-->
<!--    }-->
<!--  },-->
<!--  mounted() {-->
<!--    if(this.orderData.orderStatus==1){-->
<!--      this.relationshipType=true-->
<!--    } else {-->
<!--      this.relationshipType=false-->
<!--    }-->
<!--  },-->
<!--  filters:{-->
<!--    price(value) {-->
<!--      var toFixedNum = Number(value).toFixed(3);-->
<!--      var realVal = toFixedNum.substring(0, toFixedNum.toString().length - 1);-->
<!--      return realVal;-->
<!--    },-->
<!--    number(value){-->
<!--      var toFixedNum = Number(value).toFixed(0);-->
<!--      return toFixedNum;-->
<!--    }-->
<!--  },-->
<!--  components:{-->
<!--  },-->
<!--  created(){-->
<!--    // this.initIconFont()-->

<!--  },-->
<!--  methods:{-->

<!--    detailsClick(orderData) {-->
<!--      console.log(orderData)-->
<!--          this.$emit('detailsClick',orderData.id)-->
<!--    },-->


<!--    // ticlick(){-->
<!--    //   eeui.openPage({-->
<!--    //       url: 'root://pages/member/distribution/transfer',-->
<!--    //       statusBarType: 'immersion',-->
<!--    //       statusBarStyle: false-->
<!--    //     }, (result) => {}-->
<!--    //   );-->
<!--    // },-->
<!--    // upgradeclick(){-->
<!--    //   console.log(this.getGlobalData().token);-->
<!--    //   upgrade({groupOrderId:this.orderData.id}).then(res=>{-->
<!--    //     eeui.toast('升级成功')-->
<!--    //     this.$emit('loadList')-->
<!--    //   }).catch(res=>{-->
<!--    //     eeui.toast('升级失败，请稍等')-->
<!--    //   })-->
<!--    //-->
<!--    // },-->
<!--    relationshipClick(){-->
<!--      this.relationshipType = !this.relationshipType-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->
<!--<style scoped>-->

<!--@keyframes move {-->
<!--  0% {-->
<!--    transform: rotate(0deg);-->
<!--  }-->
<!--  100% {-->
<!--    transform: rotate(180deg);-->
<!--  }-->
<!--}-->

<!--.order_list {-->
<!--  margin-top: 20px;-->
<!--  padding-left: 9px;-->
<!--  padding-right: 9px;-->
<!--  width: 25%;-->
<!--  /*width: 188px;*/-->
<!--  box-sizing: border-box;-->
<!--}-->

<!--.order_list_item {-->
<!--  width: 175px;-->
<!--  background-color: rgba(255, 255, 255, 1);-->
<!--  /*border-radius: 16px;*/-->
<!--  margin-top: 5px;-->
<!--  padding: 6px;-->
<!--  box-sizing: border-box;-->
<!--}-->

<!--.order_list_header {-->
<!--  display: flex;-->
<!--  flex-direction: row;-->
<!--  justify-content: space-between;-->
<!--  align-items: center;-->
<!--  width: 162px;-->
<!--  height: 10px;-->
<!--}-->

<!--.order_list_header_title {-->
<!--  font-size: 6px;-->
<!--  font-weight: 500;-->
<!--  color: rgba(26, 26, 30, 1);-->
<!--  line-height: 18px;-->
<!--  width: 100px;-->
<!--  lines:1;-->
<!--  span-overflow: ellipsis;-->
<!--  overflow: hidden;-->
<!--  white-space: nowrap;-->
<!--}-->

<!--.order_list_header_status {-->
<!--  font-size: 6px;-->
<!--  font-weight: 400;-->
<!--  color:#ea706a;-->
<!--  overflow: hidden;-->
<!--  text-overflow: ellipsis;-->
<!--  white-space: nowrap;-->
<!--}-->

<!--.order_list_content {-->
<!--  width: 162px;-->
<!--  display: flex;-->
<!--  flex-direction: row;-->
<!--  margin-top: 10px;-->
<!--  position: relative;-->
<!--}-->

<!--.order_list_content_img {-->
<!--  width: 42px;-->
<!--  height: 42px;-->
<!--  background: rgba(250, 250, 250, 1);-->
<!--  border-radius: 4px;-->
<!--  overflow: hidden;-->
<!--}-->

<!--.order_list_content_box {-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--}-->

<!--.order_list_content_top {-->
<!--  width: 115px;-->
<!--  display: flex;-->
<!--  flex-direction: row;-->
<!--  justify-content: space-between;-->
<!--  align-items: center;-->
<!--  margin-bottom: 4px;-->
<!--}-->

<!--.order_list_content_name {-->
<!--  font-size: 7px;-->
<!--  font-weight: 400;-->
<!--  color: rgba(26, 26, 30, 1);-->
<!--  display: block;-->
<!--  lines:1;-->
<!--  width: 80px;-->
<!--  text-overflow: ellipsis;-->
<!--  overflow: hidden;-->
<!--  white-space: nowrap;-->
<!--}-->

<!--.order_list_content_price {-->
<!--  display: flex;-->
<!--  flex-direction: row;-->
<!--}-->

<!--.order_list_content_priceIcon{-->
<!--  font-size: 9px;-->
<!--  font-weight: 400;-->
<!--  color: #ea706a;-->
<!--  line-height: 7px;-->
<!--}-->

<!--.order_list_content_priceTitle{-->
<!--  font-size: 6px;-->
<!--  font-weight: 400;-->
<!--  color: #ea706a;-->
<!--  line-height: 8px;-->
<!--  /* margin-left: 2px; */-->
<!--}-->
<!--.aaaaaaaaa{-->
<!--  margin-top: 5px;-->
<!--  /* background-color: blueviolet; */-->
<!--  display: flex;-->
<!--  flex-direction: row;-->
<!--  align-items: center;-->
<!--}-->
<!--.order_list_content_bottom {-->
<!--  width: 115px;-->
<!--  display: flex;-->
<!--  flex-direction: row;-->
<!--  justify-content: space-between;-->
<!--  align-items: center;-->
<!--}-->

<!--.order_list_content_subtitle {-->
<!--  font-size: 6px;-->
<!--  font-weight: 400;-->
<!--  color: rgba(26, 26, 30, 1);-->
<!--  line-height: 9px;-->
<!--  opacity: 0.5;-->
<!--  width: 100px;-->
<!--  text-overflow: ellipsis;-->
<!--  lines:2;-->
<!--  overflow: hidden;-->
<!--  text-overflow: ellipsis;-->
<!--  -webkit-line-clamp: 2;-->
<!--}-->

<!--.order_list_content_numberIcon{-->
<!--  font-size: 5px;-->
<!--  font-weight: 400;-->
<!--  color: rgba(26, 26, 30, 1);-->
<!--  line-height: 7px;-->
<!--  opacity: 0.5;-->
<!--}-->

<!--.order_list_content_number {-->
<!--  font-size: 6px;-->
<!--  font-weight: 400;-->
<!--  color: rgba(26, 26, 30, 1);-->
<!--  line-height: 6px;-->
<!--  opacity: 0.5;-->
<!--  margin-left: 1px;-->
<!--}-->

<!--.order_list_content_information {-->
<!--  width: 162px;-->
<!--  height: 10px;-->
<!--  background: rgba(0, 0, 0, 0);-->
<!--  display: flex;-->
<!--  justify-content: space-between;-->
<!--  align-items: center;-->
<!--  flex-direction: row;-->
<!--  margin-top: 10px;-->
<!--}-->

<!--.order_list_content_left {-->
<!--  font-size: 6px;-->
<!--  font-weight: 400;-->
<!--  color: rgba(26, 26, 30, 1);-->
<!--  line-height: 18px;-->
<!--  opacity: 0.5;-->
<!--}-->

<!--.order_price_title {-->
<!--  font-size: 12px;-->
<!--  font-weight: 400;-->
<!--  color: rgba(26, 26, 30, 1);-->
<!--  line-height: 9px;-->
<!--}-->

<!--.order_price_icon {-->
<!--  font-size: 10px;-->
<!--  font-weight: 400;-->
<!--  color: #eb594f;-->
<!--  line-height: 9px;-->
<!--}-->

<!--.order_price_number {-->
<!--  font-size: 12px;-->
<!--  font-weight: 400;-->
<!--  color: #eb594f;-->
<!--  line-height: 9px;-->
<!--}-->
<!--.order_price_box{-->
<!--  display: flex;-->
<!--  flex-direction: row;-->
<!--  align-items: center;-->
<!--}-->

<!--.order_list_botton {-->
<!--  width: 162px;-->
<!--  display: flex;-->
<!--  flex-direction: row;-->
<!--  justify-content: flex-end;-->
<!--  align-items: center;-->
<!--  margin-top: 10px;-->
<!--}-->

<!--.order_list_botton_gray {-->
<!--  width: 34px;-->
<!--  height: 14px;-->
<!--  border-style: solid;-->
<!--  border-width: 1px;-->
<!--  border-color: rgba(126, 128, 136, 0.8);-->
<!--  border-radius: 4px;-->
<!--  display: flex;-->
<!--  justify-content: center;-->
<!--  align-items: center;-->
<!--  margin-left: 6px;-->
<!--}-->

<!--.order_list_botton_gray_title {-->
<!--  font-size: 6px;-->
<!--  font-weight: 400;-->
<!--  line-height: 12px;-->
<!--  color: rgba(26, 26, 30, 0.5);-->
<!--}-->


<!--.order_list_botton_red {-->
<!--  width: 34px;-->
<!--  height: 12px;-->
<!--  border-radius: 4px;-->
<!--  display: flex;-->
<!--  justify-content: center;-->
<!--  align-items: center;-->
<!--  opacity: 0.8;-->
<!--}-->

<!--.order_list_botton_red_title {-->
<!--  font-size: 12px;-->
<!--  font-weight: 400;-->
<!--  line-height: 12px;-->
<!--  /* color: white; */-->
<!--}-->

<!--.order_list_content_more {-->
<!--  display: flex;-->
<!--  flex-direction: row;-->
<!--  justify-content: flex-end;-->
<!--  align-items: center;-->
<!--  position: absolute;-->
<!--  right: 0;-->
<!--  height: 42px;-->
<!--}-->

<!--.order_item_icon {-->
<!--  font-size: 18px;-->
<!--  opacity: 0.3;-->
<!--  width: 13px;-->
<!--  height: 13px;-->
<!--}-->

<!--.order_item_more_number {-->
<!--  font-size: 12px;-->
<!--  font-weight: 400;-->
<!--  color: rgba(26, 26, 30, 1);-->
<!--  opacity: 0.5;-->
<!--}-->

<!--.mg-l20 {-->
<!--  margin-left: 10px;-->
<!--}-->

<!--.mg-r20 {-->
<!--  margin-right: 5px-->
<!--}-->

<!--.order_list_bottom{-->
<!--  flex: 1;-->
<!--  position: relative;-->
<!--  display:flex;-->
<!--  flex-direction: row;-->
<!--  align-items: center;-->
<!--  margin-top: 20px;-->
<!--  /* background-color: blueviolet; */-->
<!--}-->

<!--.order_list_bottom_item{-->
<!--  /*width: 52px;*/-->
<!--  /*height: 52px;*/-->
<!--  width: 13px;-->
<!--  height: 13px;-->
<!--  background-color: #b4b4b4;-->
<!--  border-radius: 100%;-->
<!--}-->

<!--.order_list_bottom_item_img{-->
<!--  /*width: 52px;*/-->
<!--  /*height: 52px;*/-->
<!--  width: 13px;-->
<!--  height: 13px;-->
<!--  background-color: #ea706a;-->
<!--  border-radius: 50%;-->
<!--}-->

<!--.order_list_bottom_itemTwo{-->
<!--  /*width: 52px;*/-->
<!--  /*height: 52px;*/-->
<!--  width: 13px;-->
<!--  height: 13px;-->
<!--  background-color: #b4b4b4;-->
<!--  border-radius: 100%;-->
<!--  position: absolute;-->
<!--  left: 10px;-->
<!--}-->

<!--.order_list_bottom_itemThree{-->
<!--  width: 13px;-->
<!--  height: 13px;-->
<!--  background-color: #b4b4b4;-->
<!--  border-radius: 100%;-->
<!--  position: absolute;-->
<!--  left: 20px;-->
<!--}-->

<!--.order_list_bottom_itemFour{-->
<!--  width: 13px;-->
<!--  height: 13px;-->
<!--  background-color: #b4b4b4;-->
<!--  border-radius: 100%;-->
<!--  position: absolute;-->
<!--  left: 30px;-->
<!--}-->

<!--.order_list_bottom_itemFive{-->
<!--  width: 13px;-->
<!--  height: 13px;-->
<!--  background-color: #b4b4b4;-->
<!--  border-radius: 100%;-->
<!--  position: absolute;-->
<!--  left: 40px;-->
<!--}-->

<!--.order_list_bottom_itemSix{-->
<!--  width: 13px;-->
<!--  height: 13px;-->
<!--  background-color: #b4b4b4;-->
<!--  border-radius: 100%;-->
<!--  position: absolute;-->
<!--  left: 50px;-->
<!--}-->

<!--.order_list_bottom_itemSeven{-->
<!--  width: 13px;-->
<!--  height: 13px;-->
<!--  background-color: #b4b4b4;-->
<!--  border-radius: 100%;-->
<!--  position: absolute;-->
<!--  left: 60px;-->
<!--}-->

<!--.order_list_bottom_itemBox{-->
<!--  display: flex;-->
<!--  flex-direction: row;-->
<!--  align-items: center;-->
<!--  position: relative;-->
<!--  flex: 1;-->
<!--}-->

<!--.order_list_bottom_icon{-->
<!--  font-family: iconfont2;-->
<!--  font-size: 12px;-->
<!--  color: #b5b5b5;-->
<!--  padding-top: 5px;-->
<!--  padding-bottom: 5px;-->
<!--  padding-left: 10px;-->
<!--  text-align: right;-->
<!--}-->

<!--.order_list_relationship_content{-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  margin-top: 10px;-->
<!--}-->

<!--.order_list_relationship{-->
<!--  display: flex;-->
<!--  flex-direction: row;-->
<!--  justify-content: center;-->
<!--  align-items: center;-->
<!--  flex: 1;-->
<!--  /*margin-bottom: 40px;*/-->
<!--}-->

<!--.order_list_relationship_itemBox{-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  justify-content: center;-->
<!--  align-items: center;-->
<!--  flex: 1;-->
<!--}-->

<!--.order_list_relationship_item{-->
<!--  /*width: 60px;*/-->
<!--  /*height: 60px;*/-->
<!--  width: 15px;-->
<!--  height: 15px;-->
<!--  background-color: #b4b4b4;-->
<!--  border-radius: 50%;-->
<!--}-->

<!--.order_list_relationship_itemTitle{-->
<!--  font-size: 8px;-->
<!--  color: #333333;-->
<!--  margin-top: 10px;-->
<!--  margin-bottom: 10px;-->
<!--  lines:1;-->
<!--  text-overflow: ellipsis;-->
<!--  overflow: hidden;-->
<!--  white-space: nowrap;-->
<!--}-->

<!--.order_list_relationship_itemImg{-->
<!--  /*width: 60px;*/-->
<!--  /*height: 60px;*/-->
<!--  width: 15px;-->
<!--  height: 15px;-->
<!--  background-color: #ea706a;-->
<!--  border-radius: 50%;-->
<!--}-->
<!--.order_button{-->
<!--  font-size: 14px;-->
<!--  width: 75px;-->
<!--  height: 25px;-->
<!--  display: flex;-->
<!--  color: #fff;-->
<!--  text-align: center;-->
<!--  padding-top: 5px;-->
<!--  border-radius: 8px;-->
<!--  background-color: #ea706a;-->
<!--}-->
<!--.oder_appjs{-->
<!--  width: 325px;-->
<!--  /* background-color: blueviolet; */-->
<!--  display: flex;-->
<!--  flex-direction: row;-->
<!--  justify-content: flex-end;-->
<!--}-->
<!--</style>-->







